<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
	</head>
	<body>
		
		<div class="container">
			<div class="row">
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp"  class="w-100">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp" class="w-100" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp" class="w-100" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp" class="w-100" >
				</div>
				</div>
				
				<div class="row">
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp"  class="img-fluid">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp" class="img-fluid" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp" class="img-fluid" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat.webp" class="img-fluid" >
				</div>
				</div>
				
				<div class="row">
					<div class="col-12 col-sm-6 col-md-3">
						<img src="../image/cat1.webp" class="img-thumbnail" >
					</div>
					<div class="col-12 col-sm-6 col-md-3">
						<img src="../image/cat1.webp" class="img-thumbnail" >
					</div>
					<div class="col-12 col-sm-6 col-md-3">
						<img src="../image/cat1.webp" class="img-thumbnail" >
					</div>
					<div class="col-12 col-sm-6 col-md-3">
						<img src="../image/cat1.webp" class="img-thumbnail" >
					</div>
				</div>
				
				<div class="container clearfix">
					
						<h3>使用浮动实现图片对齐</h3>
						<img src="../image/cat2.webp"  title="第一张图片" class="float-right">
						<img src="../image/cat2.webp"  title="第二张图片" class="float-left">
						
						
					
				</div>
				<div class="container border">
					<img src="../image/cat2.webp"  class=" mx-auto d-block">
				</div>
			</div>
			<div class="container">
				<img src="../image/cat2.webp" class="mx-auto d-block" >
			</div>
			<div style="width:300px; background-color: red; height: 300px;" class="mx-auto">hello</div>
			
		
	</body>
</html>
